<script setup lang="ts">
const props: any = defineProps<{
    ujt: any;
    opt: any;
}>();

const { $global, $fn, $db } = props.ujt;

</script>

<template>
    <section class="kdd-li-area">
        <div class="as-channel-search">
            <ChannelListSearch :ujt="ujt" :opt="opt">
                <template #default="{ item, opt }">
                    <div class="as-channel-search-main">
                        <input v-model="item.ss" :placeholder="$fn.lg('asai.searchtips')" />
                        <button @pointerdown="opt.searchSubmit()">{{ $fn.lg('asai.search') }}</button>
                    </div>

                    <div class="as-channel-search-opt">
                        <select v-model="item.ssty">
                            <option v-for="ssitem in $db[props.opt.channel].sss" :key="ssitem"
                                :value="ssitem === 'asai' ? undefined : ssitem">
                                {{
                                    ssitem === 'asai'
                                        ? $global.lang?.[$db[props.opt.channel].sn]?.sss
                                        : $db[props.opt.channel].rfdata?.lang?.[ssitem]
                                }}
                            </option>
                        </select>
                        <select v-model="item.sx">
                            <option v-for="sxitem in $db[props.opt.channel].sxs" :key="sxitem"
                                :value="sxitem === 'asai' ? undefined : sxitem">
                                {{
                                    sxitem === 'asai'
                                        ? $global.lang?.[$db[props.opt.channel].sn]?.sxs
                                        : $db[props.opt.channel].rfdata?.lang?.[sxitem]
                                }}
                            </option>
                        </select>
                        <select v-model="item.sxty">
                            <option v-for="(sxitem, index) in $global.lang?.[
                                $db[props.opt.channel].sn
                            ]?.sxtys" :key="'sxty' + index" :value="index == 0 ? undefined : index.toString()">
                                {{ sxitem }}
                            </option>
                        </select>
                    </div>
                </template>
            </ChannelListSearch>
        </div>

        <div class="kdd-li-category">
            <ChannelClass :ujt="ujt" :opt="opt">
                <template #default="{ item, opt }">
                    <div :title="item[1] || ''" :class="{
                        'kdd-li-category-item': true,
                        cur:
                            item[0] === $global.location.query?.fl ||
                            (item[0] === 'asai' && !$global.location.query?.fl),
                    }" @pointerdown="
                        opt.setChannelClass(item[0] === 'asai' ? '' : item[0], -1)
                        ">
                        {{ item[1] }}
                    </div>
                </template>
            </ChannelClass>
        </div>

        <div class="kdd-li-main">
            <ChannelList :ujt="ujt" :opt="opt">
                <template #default="{ item, opt }">
                    <div class="kdd-li-card" :title="item?.tit || ''" @pointerdown="opt.setShow(item?.sn || '')">
                        <div class="kdd-li-color-block"></div>
                        <div class="kdd-li-info">
                            <h3>{{ item?.tit || '' }}</h3>
                            <p>负责机器人运动控制、路径规划等算法的研究与开发。</p>
                            <p>
                            <div class="btns" v-if="3 < $global.user?.info?.lv">
                                <div @pointerdown.stop="
                                    opt.optConfirm({
                                        con:
                                            $fn.lg(
                                                props.opt.channel + '.ui.delconfirm'
                                            ) || $global.lang.asai.delconfirm,
                                        fn: () => {
                                            opt.delItem(item?.sn);
                                        },
                                    })
                                    ">
                                    {{ $fn.lg(props.opt.channel + '.ui.del') }}
                                </div>
                                <div @pointerdown.stop="opt.editItem(item.sn)">
                                    {{ $fn.lg(props.opt.channel + '.ui.edit') }}
                                </div>
                            </div>
                            </p>
                        </div>
                    </div>
                </template>
            </ChannelList>
        </div>

        <div class="kdd-li-page">
            <ChannelListPage :ujt="ujt" :opt="opt">
                <template #default="{ item, opt }">
                    <div @pointerdown="$db[props.opt.channel]?.setpage(item)" :class="item == $global.location.query?.pg ||
                        (item == 1 && !$global.location.query?.pg)
                        ? 'kdd-li-page-item-cur'
                        : 'kdd-li-page-item'
                        ">
                        {{ item }}
                    </div>
                </template>
            </ChannelListPage>
        </div>
    </section>
</template>

<style scoped lang="scss">
/* 主内容区 */
.kdd-li-area {
    min-height: calc(100vh - var(--nav-height));
    padding: var(--nav-height) 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: radial-gradient(circle at center,
            rgba(0, 247, 255, 0.1) 0%,
            rgba(10, 10, 46, 1) 70%);
}

/* 搜索框 */
.as-channel-search {
    width: min(90%, 700px);
    position: relative;
    margin: 2rem 0;
    display: flex;
    flex-direction: column;

    .as-channel-search-main {

        color: white;
        display: flex;
        border: 2px solid var(--primary);
        padding: 1.2rem 2rem;
        border-radius: 50px;
        backdrop-filter: blur(5px);
        overflow: hidden;
        background: rgba(255, 255, 255, 0.1);
        transition: 0.3s;

        &:hover {
            outline: none;
            box-shadow: 0 0 30px var(--primary);
        }

        input {
            display: block;
            min-width: 120px;
            padding: 0 12px;
            flex-grow: 1;
            font-size: clamp(1rem, 2.5vw, 1.2rem);
        }

        button {
            font-size: var(--fs2);
            cursor: pointer;
            width: auto;
            min-width: 60px;
            padding: 0 12px;
            line-height: 150%;
            border-radius: 50px;
            background-color: var(--cm8);
            color: var(--cm0);
        }
    }

    .as-channel-search-opt {
        display: flex;
        justify-content: center;
    }
}

/* 分类列表 */
.kdd-li-category {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 2rem;

    .cur {
        background: radial-gradient(circle at center,
                rgba(0, 247, 255, 0.1) 0%,
                rgba(10, 10, 46, 1) 70%);

    }
}

.kdd-li-category-item {
    background: var(--bg-gradient);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    cursor: pointer;
    transition: 0.3s;
}

.kdd-li-category-item:hover {
    transform: scale(1.1);
}

/* 招聘列表 */
.kdd-li-main {
    max-width: 1200px;
    width: 100%;
}

.kdd-li-card {
    background: rgba(255, 255, 255, 0.05);
    padding: 2rem;
    border-radius: 20px;
    border: 1px solid rgba(0, 247, 255, 0.2);
    transition: 0.3s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
}

.kdd-li-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg,
            transparent,
            var(--primary),
            transparent);
    transform: rotate(45deg);
    transition: 0.5s;
    opacity: 0;
}

.kdd-li-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 247, 255, 0.3);
}

.kdd-li-card:hover::before {
    opacity: 0.3;
    animation: kddBorderFlow 3s linear infinite;
}

@keyframes kddBorderFlow {
    0% {
        transform: rotate(45deg) translate(-30%, -30%);
    }

    100% {
        transform: rotate(45deg) translate(30%, 30%);
    }
}

/* 色块代替图片 */
.kdd-li-color-block {
    width: 120px;
    height: 120px;
    background: var(--bg-gradient);
    margin-right: 2rem;
    flex-shrink: 0;
}

.kdd-li-info {
    flex-grow: 1;
}

/* 分页 */
.kdd-li-page {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin: 2rem 0;
}

.kdd-li-page-item-cur,
.kdd-li-page-item {
    background: rgba(255, 255, 255, 0.1);
    padding: 0.5rem 1rem;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

.kdd-li-page-item-cur,
.kdd-li-page-item:hover {
    background: var(--bg-gradient);
}

/* 页脚 */
.kdd-footer {
    background: rgba(0, 0, 0, 0.3);
    padding: 3rem 20px;
    text-align: center;
    font-size: 0.9rem;
}

/* 响应式设计 */
@media (max-width: 992px) {
    .kdd-nav-menu {
        position: fixed;
        top: var(--nav-height);
        right: -100%;
        flex-direction: column;
        background: rgba(10, 10, 46, 0.95);
        width: min(300px, 80%);
        padding: 2rem;
        backdrop-filter: blur(10px);
        border-radius: 0 0 0 20px;
    }

    .kdd-nav-menu.active {
        right: 0;
    }

    .kdd-menu-toggle {
        display: block;
    }

    .kdd-li-card {
        padding: 1.5rem;
    }

    .kdd-li-color-block {
        width: 100px;
        height: 100px;
        margin-right: 1.5rem;
    }
}

@media (max-width: 768px) {
    :root {
        --nav-height: 50px;
    }

    .kdd-logo {
        font-size: 1.5rem;
    }

    .kdd-li-area {
        min-height: 80vh;
    }

    .as-channel-search-main>input {
        padding: 1rem 1.5rem;
    }

    .kdd-li-main {
        margin: 3rem auto;
    }
}

@media (max-width: 480px) {
    .kdd-nav-bar {
        padding: 0 15px;
    }

    .kdd-li-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .kdd-li-color-block {
        margin-bottom: 1rem;
        margin-right: 0;
    }

    .kdd-li-card h3 {
        font-size: 1.1rem;
    }

    .kdd-li-card p {
        font-size: 0.9rem;
    }

    .kdd-footer {
        padding: 2rem 15px;
    }
}
</style>
